<style lang="less">
    @import "./loanImageManage.less";
</style>
<template>
    <div class="search">
        <Row>
            <Col>
                <Card>
                    <Row>
                        <Form  ref="searchForm" :model="searchForm" inline :label-width="120" class="search-form" @keydown.native.enter.prevent="handleSearch">
                            <Form-item label="申请编号" prop="applyNo">
                                <Input type="text" v-model="searchForm.applyNo" clearable placeholder="请输入申请编号"
                                       style="width: 160px"/>
                            </Form-item>
                            <Form-item label="客户姓名" prop="custName">
                                <Input type="text" v-model="searchForm.custName" clearable placeholder="请输入客户姓名"
                                       style="width: 160px"/>
                            </Form-item>
                            <span v-if="drop">
                                <Form-item label="合同号码" prop="contractNo">
                                    <Input type="text" v-model="searchForm.contractNo" clearable placeholder="请输入合同号码"
                                       style="width: 160px"/>
                                </Form-item>
                                <Form-item label="经销商名称" prop="dealerName">
                                    <Input type="text" v-model="searchForm.dealerName" clearable placeholder="请输入经销商名称"
                                           style="width: 160px"/>
                                </Form-item>
                                <!--<Form-item label="案件状态" prop="applyStatus">
                                    <Select v-model="searchForm.applyStatus" style="width:160px" clearable placeholder="请选择案件状态">
                                        <Option v-for="item in dataDic.conApplyStatus" :value="item.value" :label="item.title" :key="item.value">{{ item.title }}</Option>
                                    </Select>
                                </Form-item>-->
                                <Form-item label="业务类型" prop="businessType">
                                    <Select v-model="searchForm.businessType" style="width:160px" clearable placeholder="请选择申请类型">
                                        <Option v-for="item in businessTypeList" :value="item.value" :label="item.title" :key="item.value">{{ item.title }}</Option>
                                    </Select>
                                </Form-item>
                                <Form-item label="放款通过时间"  prop="lendingPassDate">
                                    <DatePicker v-model="passSelectDate" type="daterange" format="yyyy-MM-dd" clearable
                                                @on-change="selectDateRange" placeholder="选择起始时间"
                                                style="width: 160px"></DatePicker>
                                </Form-item>
                                <Form-item label="合同激活时间"  prop="actTime">
                                    <DatePicker v-model="activeSelectDate" type="daterange" format="yyyy-MM-dd" clearable
                                                @on-change="selectActiveDateRange" placeholder="选择起始时间"
                                                style="width: 160px"></DatePicker>
                                </Form-item>

                            </span>
                            <Form-item style="margin-left: -35px;" v-if="dropDownContent=='展开'">
                                <Button @click="handleSearch" type="primary" icon="ios-search">查询</Button>
                                <Button @click="handleReset" type="primary" icon="ios-trash">重置</Button>
                                <a class="drop-down" @click="dropDown">{{dropDownContent}}
                                    <Icon :type="dropDownIcon"></Icon>
                                </a>
                            </Form-item>
                            <Form-item style="margin-left: -65px;width:100%;text-align: center;" v-if="dropDownContent=='收起'">
                                <Button @click="handleSearch" type="primary" icon="ios-search">查询</Button>
                                <Button @click="handleReset" type="primary" icon="ios-trash">重置</Button>
                                <a class="drop-down" @click="dropDown">{{dropDownContent}}
                                    <Icon :type="dropDownIcon"></Icon>
                                </a>
                            </Form-item>
                        </Form>
                    </Row>
                    <Row>
                        <Table :loading="loading" border :columns="columns" :data="data" sortable="custom" :row-class-name="rowClassName"
                               @on-sort-change="changeSort" ref="table">
                            <template slot-scope="{ row, index }" slot="action">
                                <Button style="margin-right:5px" size="small">
                                    <DynamicLink component="projects/afs-core-business/pages/case/approve/image-manage/loan/loanAuditHistory"
                                                 :isFull="true" :params="{applyNo:row.applyNo,contractNo:row.contractNo,applyStatus:row.applyStatus}" name="查看" page-title="详情查看" >
                                    </DynamicLink>
                                </Button>
                                <Button type="primary" size="small" @click="uploadImage(row)">上传影像</Button>
                            </template>
                            <template slot-scope="{row , index}" slot="applyStatus">
                                <span>{{setApplyStatusTitle(row.applyStatus)}}</span>
                            </template>
                            <template slot-scope="{row , index}" slot="businessType">
                                <span>{{setBusinessTypeTitle(row.businessType)}}</span>
                            </template>
                        </Table>
                    </Row>
                    <Row type="flex" justify="end" class="page">
                        <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize"
                              @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10,20,50]"
                              size="small" show-total show-elevator show-sizer></Page>
                    </Row>
                </Card>
            </Col>
        </Row>
        <Modal v-model="showUploadModel" :width="1100" @on-ok="ok" @on-cancel="cancel">
            <file-operation :isInt="canUpload" :onlyUpload="onlyUpload" :uploadParam="uploadParam" :path="path" :isAdminUpload="isAdminUpload"></file-operation>
        </Modal>
    </div>

</template>
<script>
    import {
        getImageManageDataList,getImageRuleParamsByContractNo
    } from "@/projects/afs-core-business/api/afs-case/image-manage/image-manage";
    //数据字典
    import {
        getByTypes,
        getDictDataByType
    } from "_p/basic/api/admin/datadic";

    import circleLoading from "_c/circle-loading/circle-loading.vue";
    import FileOperation from "../../../../../../basic/pages/image/upload-file/fileOperation";
    export default {
        name: "approve-task",
        components: {
            FileOperation,
            circleLoading,
        },
        data() {
            return {
                recordVisible:false,
                markDiscardVisible:false,
                appointVisible:false,
                modalTitle:"标签信息",
                loading: true,
                labelList: [],
                brandNameList: [],
                isAdminUpload:true,
                operationLoading: false,
                applyno:"",
                stageId: '',
                nodeId: '',
                taskOriOwner:'',
                operationType:null,
                applyNoParam:'',
                locationData: [],
                passSelectDate:null,
                activeSelectDate:null,
                appointApplyNo:null,
                searchForm: {
                    applyNo: "",
                    contractNo:"",
                    applyStatus:"",
                    custName:"",
                    businessStatusIn:"",
                    dealerName:"",
                    businessType:"",
                    pageNumber: 1, // 当前页数
                    pageSize: 10, // 页面大小
                    lendingPassStartDate:"",
                    lendingPassEndDate:"",
                    actTimeStartDate:"",
                    actTimeEndDate:"",
                    passSelectDate:null,
                    activeSelectDate:null,
                },
                selectList: [],
                selectCount: 0,
                showUploadModel:false,
                onlyUpload:false,
                canUpload:false,
                tags: '',
                modalType: 0,
                errorPass: "",
                processTypeList:[],
                isOpen:[],
                businessTypeList:[],
                applyStatusList:[],
                carType:[],
                carNature:[],
                operateWay:[],
                priority:[],
                channelType: [],
                affiliatedWay:[],
                lendingModeList:[],
                isLock:[],
                isTop:[],
                businessStatusIn:[],
                makeLoanLabelVisible: false,
                makeLoanLabelOptionForm: {
                  labelName: ''
                },
                makeLoanDiscardOptionForm: {
                    discardResult:''
                },
                lockFormVisible:false,
                lockOptionStatus : '',
                lockOptionForm: {
                    processRemark: ''
                },
                topOptionStatus: '',
                dropDownContent: '展开',
                dropDownIcon: 'ios-arrow-down',
                drop: false,
                dicKeys: [
                    'businessType',
                    'conApplyStatus',
                    'carType',
                    'carNature',
                    'operateWay',
                    'affiliatedWay',
                    'lendingMode',
                    'channelType',
                    'priority'
                ],
                secondsAgo: 0,
                interval: null,
                formValidate: {
                    processRemark: [{required: true, message: "备注不能为空", trigger: "blur"}]
                },
                columns: [
                    {
                        title: "操作",
                        key: "action",
                        minWidth: 170,
                        align: "center",
                        fixed: "left",
                        slot: "action",
                        className: 'select-table-info-column'
                    },
                    {
                        title: "合同号码",
                        key: "contractNo",
                        minWidth: 165,
                        align: "center",
                        fixed: "left",
                        sortable: true,
                    },
                    {
                        title: "客户姓名",
                        key: "custName",
                        minWidth: 165,
                        sortable: true,
                        fixed: "left",
                    },
                    {
                        title: "申请编号",
                        key: "applyNo",
                        minWidth: 165,
                        sortable: true,
                    },
                    {
                        title: "合作商名称",
                        key: "dealerName",
                        sortable: true,
                        minWidth: 165
                    },
                    {
                        title: "案件状态",
                        key: "applyStatus",
                        sortable: true,
                        minWidth: 150,
                        type:'singleSelect',
                        slot:"applyStatus",
                    },
                    {
                        title: "业务类型",
                        key: "businessType",
                        type:'singleSelect',
                        sortable: true,
                        minWidth: 165,
                        slot:"businessType",
                    },
                    {
                        title: "放款申请时间",
                        key: "lendingFirstDate",
                        sortable: true,
                        minWidth: 160
                    },
                    {
                        title: "放款通过时间",
                        key: "lendingPassDate",
                        sortable: true,
                        minWidth: 160
                    },
                    {
                        title: "激活时间",
                        key: "actTime",
                        sortable: true,
                        minWidth: 160
                    },
                ],
                data: [],
                total: 0,
                path:"case",
                uploadParam:{
                    busiNo:"",
                    belongNo:"",
                    busiType:"",
                    busiData:{},
                },
            };
        },
        methods: {
            init() {
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.getTaskList();
                this.initDataDic();
            },
            initDataDic() {
                let self = this
                getByTypes(this.dicKeys).then(res => {
                    if (res.code === '0000' && res.data) {
                        self.dataDic = res.data
                        this.businessTypeList.push(...res.data.businessType)
                        this.applyStatusList.push(...res.data.conApplyStatus)
                        this.carType.push(...res.data.carType)
                        this.carNature.push(...res.data.carNature)
                        this.operateWay.push(...res.data.operateWay)
                        this.affiliatedWay.push(...res.data.affiliatedWay)
                        this.lendingModeList.push(...res.data.lendingMode)
                        this.priority.push(...res.data.priority);
                        this.channelType.push(...res.data.channelType)
                    }
                })
            },
            rowClassName (row, index) {
                if (row.isLock =="yes") {
                    return 'demo-table-lock-row';
                }
                if(row.isOverdue=="yes"){
                    return 'demo-table-overdue-row';
                }
                if(row.needReview=="yes"){
                    return 'demo-table-retrial-row';
                }

                return '';
            },
            selectDateRange(v) {
                if (v) {
                    this.searchForm.lendingPassStartDate = v[0];
                    this.searchForm.lendingPassEndDate = v[1];
                }
            },
            selectActiveDateRange(v) {
                if (v) {
                    this.searchForm.actTimeStartDate = v[0];
                    this.searchForm.actTimeEndDate = v[1];
                }
            },
            dropDown() {
                if (this.drop) {
                    this.dropDownContent = '展开'
                    this.dropDownIcon = 'ios-arrow-down'
                } else {
                    this.dropDownContent = '收起'
                    this.dropDownIcon = 'ios-arrow-up'
                }
                this.drop = !this.drop
            },
            handleSearch() {
                this.searchForm.pageNumber = 1;
                if (this.searchForm.pageSize == '' || this.searchForm.pageSize == null){
                    this.searchForm.pageSize = 10;
                }
                this.getTaskList();
            },
            handleReset() {
                this.$refs.searchForm.resetFields();
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.selectDate = null;
                this.searchForm.brandCode =''
                this.searchForm.caseLabel =''
                this.searchForm.startDate = null;
                this.searchForm.endDate = null;

                // 重新加载数据
                this.getTaskList();
            },
            cancel(){
                this.showUploadModel = false;
                this.canUpload=false;
                this.onlyUpload=false;
                this.uploadParam={};
                this.getTaskList();
            },
            ok(){
                this.showUploadModel = false;
                this.canUpload=false;
                this.onlyUpload=false;
                this.uploadParam={};
                this.getTaskList();
            },
            clearSelectAll() {
                this.$refs.table.selectAll(false);
            },
            changeSort(e) {
                this.searchForm.sort = e.key;
                this.searchForm.order = e.order;
                if (e.order === "normal") {
                    this.searchForm.order = "";
                }
                 this.getTaskList();
            },
            changePage(v) {
                this.searchForm.pageNumber = v;
                this.getTaskList();
                this.clearSelectAll();
            },
            changePageSize(v) {
                this.searchForm.pageSize = v;
                this.getTaskList();
            },
            getTaskList() {
                this.loading = true;
                getImageManageDataList(this.searchForm).then(res => {
                    this.loading = false;
                    if (res.code === "0000") {
                        this.data = res.data.records;
                        this.total = res.data.total;
                    }
                    if(this.total > 0) {
                        this.startAddSeconds();
                    }
                });
                this.selectCount=0;
            },
            initProcessType(){
                let params = {
                    type: "processType"
                }
                getDictDataByType(params.type).then(res =>{
                    if (res.code === "0000"){
                        this.processTypeList = res.data;
                    }
                });
            },
            setProcessTypeTitle(val){
                let dic = {}
                this.processTypeList.forEach(column => {
                    if(column.value === val){
                        dic = column;
                    }
                });
                return dic.title;
            },
            initBusinessType(){
                let params = {
                    type: "businessType"
                }
                getDictDataByType(params.type).then(res =>{
                    if (res.code === "0000"){
                        this.businessTypeList = res.data;
                    }
                });
            },
            setBusinessTypeTitle(val){
                let dic = {}
                this.businessTypeList.forEach(column => {
                    if(column.value === val){
                        dic = column;
                    }
                });
                return dic.title;
            },
            initApplyStatusType(){
                let params = {
                    type: "conApplyStatus"
                }
                getDictDataByType(params.type).then(res =>{
                    if (res.code === "0000"){
                        this.applyStatusList = res.data;
                    }
                });
            },
            setApplyStatusTitle(val){
                let dic = {}
                this.applyStatusList.forEach(column => {
                    if(column.value === val){
                        dic = column;
                    }
                });
                return dic.title;
            },

            initLendingModeType(){
                let params = {
                    type: "lendingMode"
                }
                getDictDataByType(params.type).then(res =>{
                    if (res.code === "0000"){
                        this.lendingModeList = res.data;
                    }
                });
            },
            setLendingModeTitle(val){
                let dic = {}
                this.lendingModeList.forEach(column => {
                    if(column.value === val){
                        dic = column;
                    }
                });
                return dic.title;
            },

            initCarType(){
                let params = {
                    type: "carType"
                }
                getDictDataByType(params.type).then(res =>{
                    if (res.code === "0000"){
                        this.carType = res.data;
                    }
                });
            },
            setCarTypeTitle(val){
                let dic = {}
                this.carType.forEach(column => {
                    if(column.value === val){
                        dic = column;
                    }
                });
                return dic.title;
            },
            initYesOrNoType(){
                let params = {
                    type: "isType"
                }
                getDictDataByType(params.type).then(res =>{
                    if (res.code === "0000"){
                        this.isOpen = res.data;
                        this.isLock = res.data;
                        this.isTop = res.data;
                    }
                });
            },
            setIsOpenTitle(val){
                let dic = {}
                this.isLock.forEach(column => {
                    if(column.value === val){
                        dic = column;
                    }
                });
                return dic.title;
            },
            setisHighlightTitle(val){
                let dic = {}
                this.isTop.forEach(column => {
                    if(column.value === val){
                        dic = column;
                    }
                });
                return dic.title;
            },
            initBusinessStatusInType(){
                let params = {
                    type: "businessStateIn"
                }
                getDictDataByType(params.type).then(res =>{
                    if (res.code === "0000"){
                        this.businessStatusIn = res.data;
                    }
                });
            },
            setBusinessStatusInTitle(val){
                let dic = {}
                this.businessStatusIn.forEach(column => {
                    if(column.value === val){
                        dic = column;
                    }
                });
                return dic.title;
            },
            startAddSeconds() {
                if (this.interval) {
                    clearInterval(this.interval);
                }
                this.secondsAgo = 0;
                let _this = this;
                this.interval = setInterval(() => {
                    _this.secondsAgo++;
                }, 1000);
            },
            formatTimeUnit(seconds) {
                let hour = parseInt((seconds / 3600).toString());
                let minute = parseInt(((seconds % 3600) / 60).toString());
                let second = (seconds % 3600) % 60;
                return (hour < 10 ? "0" + hour : hour) +
                    " : " + (minute < 10 ? "0" + minute : minute) +
                    " : " + (second < 10 ? "0" + second : second);
            },
            cancelAppoint(){
                this.appointVisible = false
            },
            afterAppoint(){
                this.getTaskList();
                this.appointVisible = false
            },
            async uploadImage(row){
               let res = await getImageRuleParamsByContractNo(row.contractNo)
                if(res.code==="0000"){
                    this.uploadParam.busiData=res.data
                }
                this.uploadParam.busiNo=row.contractNo
                this.uploadParam.belongNo=row.contractNo
                this.uploadParam.busiType="loanApply,loanApprove"
                this.canUpload=true
                this.showUploadModel=true
            },
            showDetail(row){

            }
        },
        watch: {
            secondsAgo(newVal, oldVal) {
                this.data.forEach(data => {
                    if (!data.originalSeconds) {
                        data.originalSeconds = 0;
                    }
                    data.timming = this.formatTimeUnit(data.originalSeconds + newVal);
                });
            }
        },
        /*mounted() {
            this.init();
        },*/
        activated() {
            this.init()
        },
    };
</script>
